<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #index {
            height: 100px;
            /* background: red; */
        }

        #index11 {
            padding-top: 25px;
        }

        #index12 {
            margin-top: 26px;
        }

        #index13 {
            font-size: 20px;

        }

        #left {
            margin-left: 100px;
        }

        #c1 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 5px;
        }

        #c2 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 5px;
            margin-left: 100px;
        }

        .dropdown-menu li a {
            margin-top: 15px;
        }
    </style>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>

<body>

    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid" id="index">
                    <!-- 左边 -->
                    <div style="float:left">
                        <ul class="nav navbar-nav" id="index11">
                            <li><a href="#"><img src="../../imgs/logo.png" alt="" style="width:50px;margin-top:-20px;margin-left:100px;"></a></li>
                            <li><h2 style="margin-top:5px;">闲时</h2></li>
                            
                            <!-- 一 -->
                            <li class="dropdown" id="left">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="index13">
                                    我是需求方 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" id="index12">
                                    <li><a href="#">预约服务</a></li>
                                    <li><a href="#">发布需求</a></li>

                                </ul>
                            </li>

                            <!-- 二 -->
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="index13">
                                    我是服务方 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" id="index12">
                                    <li><a href="#">报名需求</a></li>
                                    <li><a href="#">发布服务</a></li>

                                </ul>
                            </li>
                            <!-- 三 -->
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="index13">
                                    我的订单 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" id="index12">
                                    <li><a href="#">订单记录</a></li>
                                    <li><a href="#">发布需求的订单</a></li>
                                    <li><a href="#">发布服务的订单</a></li>
                                    <li><a href="#">预约服务的订单</a></li>
                                    <li><a href="#">预约需求的订单</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- 右边 -->
                    <div style="float:right">
                        <ul class="nav navbar-nav" id="index11">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="index13">
                                    <span class="glyphicon glyphicon-envelope"></span>
                                </a>
                                <ul class="dropdown-menu" style="width:250px;margin-top:23px;">
                                    <li><a href="#">
                                            <div style="overflow: hidden">
                                                <p style="float: left;color:#999;">消息 </p>
                                                <p style="float:right">全部已读</p>
                                            </div>
                                        </a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">系统通知</a></li>
                                    <li><a href="#">交易通知</a></li>
                                    <li><a href="#">预约报名</a></li>

                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="index13">
                                    <span>
                                            <img src="../../imgs/money.png" class="media-object" >
                                    </span>
                                </a>
                                <ul class="dropdown-menu" style="width:250px;margin-left:-80px; margin-top:23px;" >
                                    <li><a href="#">
                                            <div style="overflow: hidden">
                                                <p style="float: left;color:#999;">财务管理 </p>
                                                <p style="float:right">+银行卡管理</p>
                                            </div>
                                        </a></li>

                                    <li class="divider"></li>
                                    <li>
                                        <div style="overflow: hidden">
                                            <p style="float: left;padding-left:18px;">余额：￥0 </p>
                                            <p style="float:right;margin-right:20px;"><a href="#">提现</a></p>
                                        </div>
                                    </li>
                                    <li>
                                            <div style="margin-top:15px;">
                                                <p style="float: left;padding-left:18px;">鱼食：16 </p>
                                                <p style="float:right ;margin-right:20px;"><a href="#">购买鱼食</a></p>
                                            </div>
                                        </li>
                                    <li style="margin-top:10px;"><a href="#">收支明细</a></li>

                                </ul>
                            </li>

                            <li class="dropdown" style="margin-right:80px;margin-top:-15px;">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="index13">
                                    <span>
                                        <img src="../../imgs/index_head.PNG" class="media-object" id="c1">
                                    </span>
                                </a>
                                <ul class="dropdown-menu" style="width:300px;margin-left:-150px;margin-top:9px;">
                                    <li>
                                        <span>
                                            <img src="../../imgs/index_head.PNG" class="media-object" id="c2">
                                            <p style="text-align: center;">sunjiatian</p>
                                            <div class="form-control" style="width:150px;margin-left:80px;">
                                                <p style="color:rgb(0, 140, 255);padding-left:8px;">
                                                    <button style="border:0px;background:white;">查看需求方主页</button></p>
                                                </p>
                                            </div>
                                        </span>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a href="#">我的主页</a></li>
                                    <li><a href="#">发票管理</a></li>
                                    <li><a href="#">收藏管理</a></li>
                                    <li><a href="#">设置</a></li>
                                    <li><a href="#">退出</a></li>

                                </ul>
                            </li>



                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>



    <ul class="dropdown-menu" id="index12">
        <li><a href="#">消息</a></li>
        <li><a href="#">系统通知</a></li>
        <li><a href="#">交易通知</a></li>
        <li><a href="#">预约报名</a></li>
    </ul>





    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <script>
        $(document).ready(function () {
            dropdownOpen();//调用
        });
        /**
         * 鼠标划过就展开子菜单，免得需要点击才能展开
         */
        function dropdownOpen() {

            var $dropdownLi = $('li.dropdown');

            $dropdownLi.mouseover(function () {
                $(this).addClass('open');
            }).mouseout(function () {
                $(this).removeClass('open');
            });
        }


    </script>
</body>

</html>